<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			html,
			body {
				margin: 0;
				height: 100%;
				width: 100%;
				overflow: hidden;
			}
			
			.loader-container {
				height: 100%;
				width: 0%;
				background: -webkit-linear-gradient(left, #FFBBFF, #FFBBFF);
				background: -moz-linear-gradient(left, #FFBBFF, #FFBBFF);
				background: -o-linear-gradient(left, #FFBBFF, #FFBBFF);
				background: -ms-linear-gradient(left, #FFBBFF, #FFBBFF);
				background: linear-gradient(left, #FFBBFF, #FFBBFF);
				border-radius: 7px;
				box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
				animation: loader 1s linear;
			}
			
			.progress {
				width: 100%;
				height: 9px;
				border-radius: 7px;
				margin-left: 0%;
				margin-top: 0%;
				background: -webkit-linear-gradient(left, #e4e3e4, #e4e5e4);
				background: -moz-linear-gradient(left, #e4e3e4, #e4e5e4);
				background: -o-linear-gradient(left, #e4e3e4, #e4e5e4);
				background: -ms-linear-gradient(left, #e4e3e4, #e4e5e4);
				background: linear-gradient(left, #e4e3e4, #e4e5e4);
			}
			
			ul {
				list-style: none;
			}
			
			li {
				line-height: 24px;
				width: 400px;
			}
		</style>
	</head>

	<script>
		var webRoot = '[[${#request.getContextPath()}]]';
	</script>

	<body>
		<h1>单线程上传</h1>
		<div>
			<a th:href="@{/index/toIndexHome}">返回首页</a>
		</div>
		<div>
			<div>
				<ul>
					<li>
						<div>文件一</div>
						<div>
							<div style="padding-top: 7px;float: left;width: 90%;">
								<div class="progress">
									<!--进度条-->
									<div class="loader-container"></div>
								</div>
							</div>
							<div style="width: 10%;float: left;">10%</div>
						</div>
					</li>
					<li>
						<div>文件二</div>
						<div>
							<div style="padding-top: 7px;float: left;width: 90%;">
								<div class="progress">
									<!--进度条-->
									<div class="loader-container"></div>
								</div>
							</div>
							<div style="width: 10%;float: left;">10%</div>
						</div>
					</li>
				</ul>
			</div>

			<div>
				<form id="uploadform" enctype="multipart/form-data">
					<input type="file" id="uploadfile" name="uploadfile" />
				</form>

				<button onclick="">上传</button>
			</div>

		</div>
	</body>
	<script th:src="@{/jquery-2.2.4.min.js}"></script>
	<script>
		var sheet = document.styleSheets[0];
		console.log(sheet);

		function changeProcess(process) {
			$(".loader-container").css("width", process + "%");
		}

		function uploadfile() {
			var formDate = new FormData($("uploadform")[0]);

			$.ajax({
				type: "post",
				url: webRoot + "",
				dataType: 'json',
				data: formDate,
				success: function(data) {
					
				}
			});
		}
	</script>

</html>